<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-03-27 21:01:05
 * @LastEditTime: 2024-03-28 03:28:55
-->
<script lang="ts" setup>
import { ref, defineProps } from "vue";
import { IFromItem } from "@/types/index.d";
import type { FormInstance } from "element-plus";
import { Plus, Refresh, Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

defineProps({
  /**
   * 表单固定参数
   */
  items: {
    type: Array<IFromItem>,
    required: true,
  },
  /**
   * 新增 true/ 编辑  false
   */
  isAdd: {
    type: Boolean,
    default: true,
  },
  /**
   * 表单信息
   */
  formData: {
    type: Object,
    required: true,
  },
  /**
   * 宽度
   */
  width: {
    type: String || Number,
    default: 750,
  },
});

const dialogVisible = ref<boolean>(false);
//dom操作id
const formRef = ref<FormInstance>();

const operationEvent = (_formData: any) => {
  dialogVisible.value = true;
};

/**
 * 重置方法
 * @param _formRef
 * @param data
 * @callback resetCallback(data,close)
 */
const resetSubmit = (_formRef: FormInstance | undefined, _data: object) => {
  if (!_formRef) return;
  _formRef.resetFields();
  try {
  } catch (error) {
    ElMessage.error("刷新失败!");
  } finally {
    dialogVisible.value = false;
  }
};

function open() {
  dialogVisible.value = true;
}
defineExpose({
  open,
});
</script>
<template>
  <!-- if 为新增按钮 -- 显示 -->
  <template v-if="isAdd">
    <el-button type="primary" :icon="Plus" @click="operationEvent(formData)">
      {{ $t(`button.add`) }}
    </el-button>
  </template>
  <!-- else 修改 -- 显示 -->
  <template v-else>
    <el-button
      type="primary"
      link
      :icon="Edit"
      @click="operationEvent(formData)"
    >
      {{ $t(`button.edit`) }}
    </el-button>
  </template>

  <!-- 按钮触发dialog 表单 -->
  <el-dialog
    v-model="dialogVisible"
    title="图标信息"
    append-to-body
    draggable
    :width="width"
  >
    <div class="content">
      <el-form ref="formRef" :model="formData">
        <el-row :gutter="50">
          <template v-for="item in items">
            <!-- input -->
            <el-col v-if="item.type == 'input'" :span="item.span">
              <el-form-item :prop="item.prop" :label="$t(item.label)">
                <el-input
                  v-model="formData[item.prop]"
                  :placeholder="
                    $t(item.label, { prefix: $t(`prefix.placeholder`) })
                  "
                  clearable
                />
              </el-form-item>
            </el-col>
            <!-- textarea -->
            <el-col v-if="item.type == 'textarea'" :span="item.span">
              <el-form-item :prop="item.prop" :label="$t(item.label)">
                <el-input
                  v-model="formData[item.prop]"
                  type="textarea"
                  :rows="item.textarea.rows"
                  :placeholder="
                    $t(item.label, { prefix: $t(`prefix.placeholder`) })
                  "
                  clearable
                />
              </el-form-item>
            </el-col>
            <!-- select -->
            <el-col v-if="item.type == 'select'" :span="item.span">
              <el-form-item :prop="item.prop" :label="$t(item.label)">
                <el-select-v2
                  v-model="formData[item.prop]"
                  :options="item.select.options ? item.select.options : []"
                  :multiple="item.select.multiple"
                  :placeholder="$t(item.label, { prefix: $t(`prefix.select`) })"
                />
              </el-form-item>
            </el-col>
            <!-- composite -->
            <el-col v-if="item.type == 'composite'" :span="item.span">
              <el-form-item :prop="item.prop" :label="$t(item.label)">
                <el-input
                  v-model="formData[item.prop]"
                  :placeholder="
                    $t(item.label, { prefix: $t(`prefix.placeholder`) })
                  "
                >
                  <template #prepend>
                    <el-select-v2
                      style="width: 80px"
                      v-model="formData[item.select.prop]"
                      :options="item.select.options ? item.select.options : []"
                    />
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <!-- custom -->
            <el-col v-if="item.type == 'custom'" :span="item.span">
              <el-form-item :prop="item.prop" :label="$t(item.label)">
                <slot :name="item.slot" :data="formData[item.prop]" />
              </el-form-item>
            </el-col>
          </template>
          <slot name="col-form"></slot>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button :icon="Refresh" @click="resetSubmit(formRef, formData)">
          {{ $t(`button.cancel`) }}
        </el-button>
        <el-button v-show="isAdd" type="primary">
          {{ $t(`button.confirm`) }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.content {
  padding: 10px 40px;
}
</style>
